<template>
  <div class="output-box">
    <cardPanel title="产值税收">
      <ul class="output-content">
        <li v-for="(item, index) in outputList" :key="index">
          <div class="output-icon">
            <img :src="item.icon" />
          </div>
          <div class="output-right">
            <p>
              <span>{{ item.num }}</span
              >{{ item.unit }}
            </p>
            <label>{{ item.label }}</label>
          </div>
        </li>
      </ul>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// 产值税收
import cardPanel from "@/components/cardPanel/index.vue";
import output1 from "@/assets/image/overview/output1.png";
import output2 from "@/assets/image/overview/output2.png";
import output3 from "@/assets/image/overview/output3.png";
import output4 from "@/assets/image/overview/output4.png";
import { overviewStore } from "@/stores/overview";

const store = overviewStore();

const overviewData: any = {
  阳光城社区: {
    累计产值: 5750,
    纳税金额: 1965,
    就业岗位: 1265,
    人均年收入: 4892,
  },
  榆康社区: {
    累计产值: 6640,
    纳税金额: 2045,
    就业岗位: 1386,
    人均年收入: 6134,
  },
  桃李路社区: {
    累计产值: 4567,
    纳税金额: 1988,
    就业岗位: 1567,
    人均年收入: 4320,
  },
  兴达路社区: {
    累计产值: 6725,
    纳税金额: 2389,
    就业岗位: 2487,
    人均年收入: 6142,
  },
  开源路社区: {
    累计产值: 5423,
    纳税金额: 2457,
    就业岗位: 1642,
    人均年收入: 5678,
  },
  圣景路社区: {
    累计产值: 5368,
    纳税金额: 1789,
    就业岗位: 1587,
    人均年收入: 5400,
  },
};

const outputList = ref([
  {
    label: "累计产值",
    num: 0,
    unit: "万元",
    icon: output1,
  },
  {
    label: "纳税金额",
    num: 0,
    unit: "万元",
    icon: output2,
  },
  {
    label: "就业岗位",
    num: 0,
    unit: "人",
    icon: output3,
  },
  {
    label: "人均年收入",
    num: 0,
    unit: "元",
    icon: output4,
  },
]);

watch(() => store.overviewType, (val:string) => {
  let allData:any = {
    累计产值: 0,
    纳税金额: 0,
    就业岗位: 0,
    人均年收入: 0,
  }
  if(val === '') {
    const keys = Object.keys(overviewData);
    keys.forEach((item:any) => {
      const info = overviewData[item];
      allData['累计产值'] += info['累计产值'];
      allData['纳税金额'] += info['纳税金额'];
      allData['就业岗位'] += info['就业岗位'];
      allData['人均年收入'] += info['人均年收入'];
    })
    allData['人均年收入'] = Number(parseInt((allData['人均年收入'] / keys.length).toString()))

  } else {
    allData = overviewData[val];
  }

  outputList.value.forEach((item:any) => {
    item.num = allData[item.label];
  })

}, {
  immediate: true
})
</script>

<style lang="scss" scoped>
.output-box {
  width: 360px;
  height: 29.5%;
}
.output-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    position: relative;
    width: 48%;
    height: 45px;
    display: flex;
    justify-content: flex-end;
  }
}
.output-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  img {
    width: 100%;
    height: 100%;
  }
}
.output-right {
  display: flex;
  flex-direction: column;
  p {
    display: flex;
    align-items: center;
    span {
      font-family: Alibaba PuHuiTi, serif;
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      color: #47e8fe;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-right: 5px;
    }
  }
  label {
    margin-top: 3px;
  }
}
</style>
